<template>
	<view class="container">
		<!-- 搜索框 -->
		<view class="search-bar">
			<input type="text" placeholder="请输入商品名称" v-model="searchQuery" />
		</view>
		<view>剩余积分：{{score}}</view>
		<!-- 商品列表 -->
		<scroll-view scroll-y="true" style="height: 85vh;">
			<view v-for="(item, index) in products" :key="index" class="product-item">
				<image :src="item.picture" mode="aspectFill"></image>
				<view class="product-info">
					<view style="font-size: 33rpx; font-weight: 600;">{{ item.name }}</view>
					<view>所需积分：{{ item.redeemPrice }}</view>
					<view style="color:#d63a3a">库存：{{item.count}}</view>

				</view>
				<view>
					<button style="background-color: #0BB584; color: aliceblue;"
						@tap="handleExchange(item.id, 1)">兑换</button>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		watch
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		myrequest
	} from '@/common/js/utils';

	const token = uni.getStorageSync('token');
	const id = ref(0);
	const count = ref(0);
	const searchQuery = ref('');
	const products = ref([]);
	const userInfo = uni.getStorageSync('userInfo');
	const score = ref(0);

	onLoad(() => {
		fetchProducts();
		getScore();
	});

	// 监听searchQuery的变化以触发搜索
	watch(searchQuery, (newVal) => {
		fetchProducts();
	});

	// 获取商品列表
	const fetchProducts = () => {
		myrequest({
			myurl: '/welfareShop/list',
			header: {
				'Authorization': token,
				'Source-Platform': 'mini-program'
			},
			data: searchQuery.value ? {
				name: searchQuery.value
			} : {}, // 根据是否有searchQuery决定是否传递name参数
			mysuccess: (res) => {
				console.log('商品列表', res);
				products.value = res.data;
			},
			myfail: (err) => {
				console.error('Failed to fetch products:', err);
			}
		});
	};

	const getScore = () => {
		myrequest({
			myurl: '/escort/getScore',
			header: {
				'Authorization': token,
				'Source-Platform': 'mini-program'
			},
			data: {
				id: userInfo.id
			},
			mysuccess: (res) => {
				console.log('积分值', res);
				score.value = res.data;
			},
			myfail: (err) => {
				console.error('Failed to fetch products:', err);
			}
		});
	}

	// 兑换商品
	const handleExchange = (id, count) => {
		myrequest({
			method: 'GET',
			myurl: '/welfareShop/exchange',
			header: {
				'Authorization': token,
				'Source-Platform': 'mini-program'
			},
			data: {
				id: id,
				count: count
			},
			mysuccess: (res) => {
				console.log('兑换结果', res);
				uni.showToast({
					title: '兑换成功',
					icon: 'success',
					duration: 1500
				});
				fetchProducts();
				getScore();
			},
			myfail: (err) => {
				console.error('Failed to exchange product:', err);
				uni.showToast({
					title: '兑换失败',
					icon: 'none'
				});
			}
		});
	};
</script>

<style scoped>
	.container {
		padding: 20rpx;
	}

	.search-bar {
		display: flex;
		margin: 0 auto 20rpx;
		border: #ccc 1rpx solid;
		border-radius: 20rpx;
		width: 500rpx;
		justify-content: center;
		text-align: center;
	}

	.product-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 30rpx;
		border-bottom: 1px solid #ddd;
		padding-bottom: 20rpx;
	}

	.product-item image {
		width: 200rpx;
		height: 200rpx;
		margin-right: 20rpx;
	}

	.product-info {
		flex: 1;
		text-align: left;
	}

	.product-info text {
		margin-bottom: 10rpx;
	}

	.product-info button {
		background-color: red;
		color: white;
		border: none;
		padding: 10rpx 20rpx;
		border-radius: 5rpx;
	}
</style>